<template>
	<view class="knowledge-container">
		<!-- 顶部导航栏 -->
		<topBar :back="false" :isPerson="true">

		</topBar>			
			
		<view class="nav-tabs">
			<view v-for="tab in tabs" :key="tab.key" class="tabs-item" :class="{ 'active': activeTab === tab.key }"
				@click="switchTab(tab.key)">
				<text>{{ tab.label }}</text>
			</view>
		</view>
		<!-- 地图容器 -->
		<view class="map-container">
			<!-- 使用高德地图 -->
			<map 
				class="knowledge-map" 
				:latitude="mapCenter.latitude" 
				:longitude="mapCenter.longitude" 
				:scale="mapScale"
				:markers="markers" 
				@markertap="onMarkerTap"
				@regionchange="onRegionChange"
			></map>

			<!-- 地图控制按钮 -->
			<view class="map-controls">
				<view class="control-btn" @click="zoomIn">
					<uni-icons type="plus" size="20" color="#333"></uni-icons>
				</view>
				<view class="control-btn" @click="zoomOut">
					<uni-icons type="minus" size="20" color="#333"></uni-icons>
				</view>
				<view class="control-btn" @click="resetMap">
					<uni-icons type="home" size="20" color="#333"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 人物列表弹窗 -->
		<uni-popup ref="personListPopup" type="center" :mask-click="true">
			<view class="person-list-content">
				<view class="person-list-header">
					<text class="person-list-title">{{ selectedRegion?.name }}</text>
					<view class="close-btn" @click="closePersonList">
						<uni-icons type="close" size="20" color="#666"></uni-icons>
					</view>
				</view>
				<view class="person-list-body">
					<view class="person-grid">
						<view 
							v-for="person in personDetails" 
							:key="person.id"
							class="person-item"
							@click="selectPerson(person.id)"
						>
							<text class="person-name">{{ person.title }}</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 人物详情弹窗 -->
		<uni-popup ref="personDetailPopup" type="center" :mask-click="true">
			<view class="person-detail-content">
				<view class="person-detail-header">
					<text class="person-detail-title">{{ selectedRegion?.name }}</text>
					<view class="close-btn" @click="closePersonDetail">
						<uni-icons type="close" size="20" color="#666"></uni-icons>
					</view>
				</view>
				<view class="person-detail-body">
					<view class="person-info">
						<text class="person-subtitle">{{ selectedRegion?.title }}</text>
						<text class="person-content">{{ selectedRegion?.content }}</text>
					</view>
					<view class="person-actions">
						<view class="action-btn primary" @click="viewPersonLocations">
							<text>查看足迹</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 地点事迹弹窗 -->
		<uni-popup ref="locationDetailPopup" type="center" :mask-click="true">
			<view class="location-detail-content">
				<view class="location-detail-header">
					<text class="location-detail-title">{{ selectedRegion?.name }}</text>
					<view class="close-btn" @click="closeLocationDetail">
						<uni-icons type="close" size="20" color="#666"></uni-icons>
					</view>
				</view>
				<view class="location-detail-body">
					<view class="location-info">
						<text class="location-event">{{ selectedRegion?.event }}</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, computed, nextTick } from 'vue'
import topBar from '@/components/topBar.vue'
import api from '@/api'
import { useUserStore } from '@/store/index.js'
import { onLoad } from '@dcloudio/uni-app'


const showPopup = ref(true) // 控制弹框显示
// 响应式数据
const currentTime = ref('09:00')
const activeTab = ref('person')
const detailPopup = ref(null)
const selectedRegion = ref(null)

// 防抖定时器
let mapUpdateTimer = null

// 导航标签
const tabs = ref([
	{ key: '1', label: '人' },
	{ key: '2', label: '事' },
	{ key: '3', label: '食' },
	{ key: '4', label: '游' },
	{ key: '5', label: '物' }
])

// 地图相关状态
const mapCenter = reactive({
	latitude: 35.8617,
	longitude: 104.1954
})

const mapScale = ref(4)
const markers = ref([])
const polygons = ref([])
const circles = ref([])

// 地图层级状态
const currentMapLevel = ref('province') // province, city, person
const selectedProvince = ref(null)
const selectedCity = ref(null)
const selectedPerson = ref(null)

// 弹窗控制
const personListPopup = ref(null)
const personDetailPopup = ref(null)
const locationDetailPopup = ref(null)

const locations = ref([])  // 正确使用 `ref` 定义一个响应式数组

// 模拟数据
const provincesData = [
	// { id: 1, name: '河北省', latitude: 38.0423, longitude: 114.5149, count: 120 },
	// { id: 2, name: '山东省', latitude: 36.6758, longitude: 117.0009, count: 95 },
	// { id: 3, name: '河南省', latitude: 34.7466, longitude: 113.6654, count: 110 },
	// { id: 4, name: '山西省', latitude: 37.8702, longitude: 112.5493, count: 80 },
	// { id: 5, name: '江苏省', latitude: 32.0415, longitude: 118.7674, count: 130 },
	// { id: 6, name: '浙江省', latitude: 30.2592, longitude: 120.1530, count: 115 },
	// { id: 7, name: '广东省', latitude: 23.1291, longitude: 113.2644, count: 150 },
	// { id: 8, name: '四川省', latitude: 30.6519, longitude: 104.0757, count: 105 },
	// { id: 9, name: '湖北省', latitude: 30.5928, longitude: 114.3055, count: 100 },
	// { id: 10, name: '湖南省', latitude: 28.2282, longitude: 112.9823, count: 98 }
]

const citiesData = {
	// 1: [ // 河北省
	// 	{ id: 101, name: '石家庄市', latitude: 38.0423, longitude: 114.5149, count: 30 },
	// 	{ id: 102, name: '邢台市', latitude: 37.0680, longitude: 114.4970, count: 25 },
	// 	{ id: 103, name: '邯郸市', latitude: 36.6060, longitude: 114.4910, count: 20 },
	// 	{ id: 104, name: '保定市', latitude: 38.8700, longitude: 115.4800, count: 22 }
	// ],
	// 2: [ // 山东省
	// 	{ id: 201, name: '济南市', latitude: 36.6758, longitude: 117.0009, count: 35 },
	// 	{ id: 202, name: '青岛市', latitude: 36.0671, longitude: 120.3826, count: 40 },
	// 	{ id: 203, name: '烟台市', latitude: 37.4638, longitude: 121.4478, count: 32 }
	// ],
	// 3: [ // 河南省
	// 	{ id: 301, name: '郑州市', latitude: 34.7466, longitude: 113.6654, count: 38 },
	// 	{ id: 302, name: '洛阳市', latitude: 34.6833, longitude: 112.4500, count: 32 },
	// 	{ id: 303, name: '开封市', latitude: 34.7970, longitude: 114.3074, count: 28 }
	// ]
}

const peopleData = {
	// 102: [ // 邢台市
	// 	{ id: 1021, name: '郭守敬', avatar: '/static/touxiang.png' },
	// 	{ id: 1022, name: '李牧', avatar: '/static/touxiang.png' },
	// 	{ id: 1023, name: '宋璟', avatar: '/static/touxiang.png' },
	// 	{ id: 1024, name: '魏征', avatar: '/static/touxiang.png' },
	// 	{ id: 1025, name: '刘邦', avatar: '/static/touxiang.png' },
	// 	{ id: 1026, name: '张飞', avatar: '/static/touxiang.png' }
	// ],
	// 101: [ // 石家庄市
	// 	{ id: 1011, name: '赵云', avatar: '/static/touxiang.png' },
	// 	{ id: 1012, name: '吕布', avatar: '/static/touxiang.png' },
	// 	{ id: 1013, name: '刘备', avatar: '/static/touxiang.png' }
	// ],
	// 201: [ // 济南市
	// 	{ id: 2011, name: '李白', avatar: '/static/touxiang.png' },
	// 	{ id: 2012, name: '杜甫', avatar: '/static/touxiang.png' },
	// 	{ id: 2013, name: '王维', avatar: '/static/touxiang.png' }
	// ]
}

const personLocations = {
	// 1021: [ // 郭守敬
	// 	{ id: 10211, name: '北京', latitude: 39.9042, longitude: 116.4074, event: '主持全国范围内的"四海测验"，编制《授时历》' },
	// 	{ id: 10212, name: '杭州', latitude: 30.2741, longitude: 120.1551, event: '主持开凿京杭大运河部分河段' },
	// 	{ id: 10213, name: '邢台', latitude: 37.0680, longitude: 114.4970, event: '出生地，少年时期学习天文历法' }
	// ],
	// 1011: [ // 赵云
	// 	{ id: 10111, name: '长坂坡', latitude: 30.5928, longitude: 114.3055, event: '单骑救主，在长坂坡七进七出救出阿斗' },
	// 	{ id: 10112, name: '汉中', latitude: 33.0776, longitude: 107.0322, event: '汉水之战，空营计退敌，展现智勇双全' },
	// 	{ id: 10113, name: '成都', latitude: 30.6519, longitude: 104.0757, event: '蜀汉建立后，担任重要军事职务' }
	// ],
	// 2011: [ // 李白
	// 	{ id: 20111, name: '长安', latitude: 34.2632, longitude: 108.9480, event: '在长安任翰林供奉，写下大量宫廷诗作' },
	// 	{ id: 20112, name: '洛阳', latitude: 34.6833, longitude: 112.4500, event: '游历洛阳，写下《洛阳女儿行》等名篇' },
	// 	{ id: 20113, name: '扬州', latitude: 32.3932, longitude: 119.4356, event: '烟花三月下扬州，写下《黄鹤楼送孟浩然之广陵》' }
	// ]
}

const personDetails = ref([])

// 计算属性
const totalCount = computed(() => {
	return provincesData.reduce((sum, province) => sum + province.count, 0)
})

const maxCount = computed(() => {
	return Math.max(...provincesData.map(province => province.count))
})

// 方法
const getCurrentTabLabel = () => {
	const tab = tabs.value.find(t => t.key === activeTab.value)
	return tab ? tab.label : '数据'
}

// 切换标签
const switchTab = (tabKey) => {
	activeTab.value = tabKey
	api.getmaplist({
	    type: tabKey
	}).then(res => {
	    console.log('查看结果:', res)
		personDetails.value = res.data
		personListPopup.value.open()
	})
	
	
	console.log(tabKey)
	// if (tabKey === 'person') {
	// 	// 重置地图状态
	// 	currentMapLevel.value = 'province'
	// 	selectedProvince.value = null
	// 	selectedCity.value = null
	// 	selectedPerson.value = null
	// 	mapCenter.latitude = 35.8617
	// 	mapCenter.longitude = 104.1954
	// 	mapScale.value = 4
	// 	// 切换标签时立即更新地图
	// 	loadMapData(true)
	// }
}

// 加载地图数据（带防抖）
const loadMapData = (immediate = false) => {
	// 清除之前的定时器
	// if (mapUpdateTimer) {
	// 	clearTimeout(mapUpdateTimer)
	// }
	
	// const updateMap = () => {
	// 	console.log('加载地图数据，当前层级:', currentMapLevel.value)
	// 	markers.value = []
		
	// 	if (currentMapLevel.value === 'province') {
	// 	// 显示省份标记
	// 	markers.value = provincesData.map(province => ({
	// 		id: province.id,
	// 		latitude: province.latitude,
	// 		longitude: province.longitude,
	// 		title: province.name,
	// 		iconPath: '', // 使用系统默认图标
	// 		width: 30,
	// 		height: 40,
	// 		callout: {
	// 			content: `${province.name}\n${province.count}人`,
	// 			color: '#333',
	// 			fontSize: 12,
	// 			borderRadius: 4,
	// 			bgColor: '#fff',
	// 			padding: 5,
	// 			display: 'BYCLICK'
	// 		}
	// 	}))
	// 	console.log('生成省份标记:', markers.value.length, '个')
	// } else if (currentMapLevel.value === 'city' && selectedProvince.value) {
	// 	// 显示城市标记
	// 	const cities = citiesData[selectedProvince.value.id] || []
	// 	console.log('加载城市数据:', cities)
	// 	markers.value = cities.map(city => ({
	// 		id: city.id,
	// 		latitude: city.latitude,
	// 		longitude: city.longitude,
	// 		title: city.name,
	// 		iconPath: '', // 使用系统默认图标
	// 		width: 30,
	// 		height: 40,
	// 		callout: {
	// 			content: `${city.name}\n${city.count}人`,
	// 			color: '#333',
	// 			fontSize: 12,
	// 			borderRadius: 4,
	// 			bgColor: '#fff',
	// 			padding: 5,
	// 			display: 'BYCLICK'
	// 		}
	// 	}))
	// 	console.log('生成城市标记:', markers.value.length, '个')
	// } else if (currentMapLevel.value === 'person' && selectedPerson.value) {
	// 	// 显示人物足迹标记
	// 	const locations = personLocations[selectedPerson.value] || []
	// 	console.log('加载人物足迹:', locations)
	// 	markers.value = locations.map(location => ({
	// 		id: location.id,
	// 		latitude: location.latitude,
	// 		longitude: location.longitude,
	// 		title: location.name,
	// 		iconPath: '', // 使用系统默认图标
	// 		width: 30,
	// 		height: 40,
	// 		callout: {
	// 			content: `${location.name}\n${location.event}`,
	// 			color: '#333',
	// 			fontSize: 12,
	// 			borderRadius: 4,
	// 			bgColor: '#fff',
	// 			padding: 5,
	// 			display: 'BYCLICK'
	// 		}
	// 	}))
	// 	console.log('生成人物足迹标记:', markers.value.length, '个')
	// 	}
	// }
	
	// //立即执行或延迟执行
	// if (immediate) {
	// 	updateMap()
	// } else {
	// 	mapUpdateTimer = setTimeout(updateMap, 100)
	// }
}



// 地图标记点击
// const onMarkerTap = (e) => {
// 	console.log('地图标记被点击:', e.detail)
// 	const markerId = e.detail.markerId
// 	console.log('当前地图层级:', currentMapLevel.value)
// 	console.log('点击的标记ID:', markerId)
	
// 	if (currentMapLevel.value === 'province') {
// 		// 点击省份，显示该省份的城市
// 		const province = provincesData.find(p => p.id === markerId)
// 		console.log('找到的省份:', province)
// 		if (province) {
// 			selectedProvince.value = province
// 			currentMapLevel.value = 'city'
// 			mapCenter.latitude = province.latitude
// 			mapCenter.longitude = province.longitude
// 			mapScale.value = 8
// 			// 点击省份时立即更新地图
// 			loadMapData(true)
// 			console.log('切换到城市层级')
// 		}
// 	} else if (currentMapLevel.value === 'city') {
// 		// 点击城市，显示该城市的人物列表
// 		const cities = citiesData[selectedProvince.value?.id] || []
// 		console.log('当前省份的城市:', cities)
// 		const city = cities.find(c => c.id === markerId)
// 		console.log('找到的城市:', city)
// 		if (city) {
// 			selectedCity.value = city
// 			selectedRegion.value = { name: city.name, people: peopleData[city.id] || [] }
// 			console.log('显示人物列表:', selectedRegion.value)
// 			personListPopup.value.open()
// 		}
// 	} else if (currentMapLevel.value === 'person') {
// 		// 点击人物足迹，显示该地点的事迹
// 		const locations = personLocations[selectedPerson.value] || []
// 		console.log('人物足迹:', locations)
// 		const location = locations.find(l => l.id === markerId)
// 		console.log('找到的地点:', location)
// 		if (location) {
// 			selectedRegion.value = location
// 			locationDetailPopup.value.open()
// 		}
// 	}
// }

// 地图区域变化
const onRegionChange = (e) => {
	// 只在用户手动缩放时更新scale，避免自动更新导致的抖动
	if (e.type === 'end' && e.causedBy === 'user') {
		const newScale = e.detail.scale
		// 只有当缩放变化较大时才更新
		if (Math.abs(newScale - mapScale.value) > 0.5) {
			mapScale.value = newScale
			// 根据缩放级别自动切换显示层级
			if (mapScale.value < 6 && currentMapLevel.value === 'city') {
				currentMapLevel.value = 'province'
				selectedProvince.value = null
				// 自动切换层级时立即更新地图
				loadMapData(true)
			}
		}
	}
}

// 选择人物
const selectPerson = (person) => {
	
	api.getmapdetail({
	    map_id: person
	}).then(res => {
	    console.log('查看结果:', res)
		//personDetails.value = res.data
		//personListPopup.value.open()
		personListPopup.value.close()
		//locations.value = res.data
			 locations.value = res.data || [] // 确保数据存在
			
		    if (locations.value.length > 0) {			
		      // 计算经纬度的平均值
		      //const avgLat = locations.reduce((sum, loc) => sum + loc.lat, 0) / locations.length
		     // const avgLng = locations.reduce((sum, loc) => sum + loc.lng, 0) / locations.length
			  const avgLat = locations.value.reduce((sum, loc) => sum + 37.0680, 0) / locations.value.length
			  const avgLng = locations.value.reduce((sum, loc) => sum + 114.4970, 0) / locations.value.length
		      console.log(avgLat)
			   console.log(avgLng)
		      // 更新地图中心点
		      mapCenter.latitude = avgLat
		      mapCenter.longitude = avgLng
		      mapScale.value = 6  // 可以调整地图的缩放级别
		      
		      // 在地图上绘制标记
		      // markers.value = locations.map((loc, index) => ({
		      //   id: index,
		      //   latitude: 37.0680, // loc.lat,
		      //   longitude: 114.4970,//loc.lng,
		      //   //iconPath: '/static/marker.png', // 自定义标记图标
		      //   // width: 20,
		      //   // height: 20
		      // }))
			  
			  markers.value = locations.value.map(location => ({
			  	id: location.id,
			  	latitude: 37.0680,
			  	longitude: 114.4970,
			  	title: 'ceshi',
			  	iconPath: '', // 使用系统默认图标
			  	width: 30,
			  	height: 40,
			  	callout: {
			  		content: '测试信息',//`${location.content}`,
			  		color: '#333',
			  		fontSize: 12,
			  		borderRadius: 4,
			  		bgColor: '#fff',
			  		padding: 5,
			  		display: 'BYCLICK'
			  	}
			  }))
			  console.log('e123242'+markers.value)
			  //loadMarkers()
		    }
			
		    // 更新视角
		    // if (locations.length > 0) {
		    //   loadMapData(true)
		    // }
		
		
		//personDetailPopup.value.open()
	})
	
	
	// selectedPerson.value = person.id
	// selectedRegion.value = personDetails[person.id]
	// personListPopup.value.close()
	// nextTick(() => {
	// 	personDetailPopup.value.open()
	// })
}

// 处理标记点击事件
const onMarkerTap = (e) => {
	console.log(e)
  const markerId = e.detail.markerId;  // 获取点击的标记 ID
  console.log(locations.value)
  // 找到点击的标记对应的位置信息
//  const selectedLocation = locations.find(loc => loc.id === markerId);
const selectedLocation = locations.value.find(loc => loc.id === markerId)

  if (selectedLocation) {
    // 找到标记后，打印出位置的内容
    console.log('选中的位置:', selectedLocation.content);
    
    // 如果需要，弹出框显示详细内容
    wx.showModal({
      title: '',
      content: selectedLocation.content,
      showCancel: false,  // 不显示取消按钮
      confirmText: '确定',
    });
  } else {
    console.log('未找到该位置');
  }
};

// 查看人物足迹
const viewPersonLocations = () => {
	// personDetailPopup.value.close()
	// currentMapLevel.value = 'person'
	
	// // 调整地图视角以显示所有足迹
	// const locations = personLocations[selectedPerson.value] || []
	// if (locations.length > 0) {
	// 	const avgLat = locations.reduce((sum, loc) => sum + loc.latitude, 0) / locations.length
	// 	const avgLng = locations.reduce((sum, loc) => sum + loc.longitude, 0) / locations.length
	// 	mapCenter.latitude = avgLat
	// 	mapCenter.longitude = avgLng
	// 	mapScale.value = 6
	// }
	
	// // 查看足迹时立即更新地图
	// loadMapData(true)
}

// 地图控制
const zoomIn = () => {
	mapScale.value = Math.min(mapScale.value + 1, 20)
}

const zoomOut = () => {
	mapScale.value = Math.max(mapScale.value - 1, 3)
}

const resetMap = () => {
	currentMapLevel.value = 'province'
	selectedProvince.value = null
	selectedCity.value = null
	selectedPerson.value = null
	mapScale.value = 4
	mapCenter.latitude = 35.8617
	mapCenter.longitude = 104.1954
	// 重置地图时立即更新
	loadMapData(true)
}

// 关闭弹窗
const closePersonList = () => {
	personListPopup.value.close()
}

const closePersonDetail = () => {
	personDetailPopup.value.close()
}

const closeLocationDetail = () => {
	locationDetailPopup.value.close()
}

// 更新时间
const updateTime = () => {
	const now = new Date()
	currentTime.value = now.getHours().toString().padStart(2, '0') + ':' + 
						now.getMinutes().toString().padStart(2, '0')
}

// 生命周期
onMounted(() => {
	console.log('组件已挂载，开始初始化')
	updateTime()
	setInterval(updateTime, 60000)
	console.log('当前活跃Tab:', activeTab.value)
	console.log('当前地图层级:', currentMapLevel.value)
	// 初始化时立即加载地图数据
	loadMapData(true)
	console.log('初始标记数量:', markers.value.length)
})
</script>

<style lang="scss" scoped>
.knowledge-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #fff;
}

.header-left {
	display: flex;
	align-items: center;
	gap: 20rpx;
	
	.time {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}
	
	.user-avatar {
		width: 40rpx;
		height: 40rpx;
	}
}

.nav-tabs {
	display: flex;
	gap: 60rpx;
	justify-content: center;
	margin-bottom: 10rpx;
	.tabs-item {
		font-size: 26rpx;
		color: rgba(13, 18, 26, 0.6);
		padding: 10rpx 0;
		position: relative;
		cursor: pointer;
		transition: color 0.3s ease;
		
		&.active {
			color: #333;
			font-weight: 700;
			font-size: 28rpx;
			
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 40rpx;
				height: 4rpx;
				background-color: #007AFF;
				border-radius: 2rpx;
			}
		}
	}
}

.header-right {
	display: flex;
	gap: 32rpx;
	
	uni-icons {
		cursor: pointer;
		transition: opacity 0.2s;
		
		&:active {
			opacity: 0.6;
		}
	}
}

.map-container {
	flex: 1;
	position: relative;
	overflow: hidden;
}

.knowledge-map {
	width: 100%;
	height: 100%;
}

.map-controls {
	position: absolute;
	right: 32rpx;
	bottom: 200rpx;
	display: flex;
	flex-direction: column;
	gap: 16rpx;
	
	.control-btn {
		width: 80rpx;
		height: 80rpx;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
		cursor: pointer;
		transition: all 0.2s ease;
		
		&:active {
			transform: scale(0.95);
			background: rgba(255, 255, 255, 1);
		}
	}
}

.data-panel {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10rpx);
	border-radius: 32rpx 32rpx 0 0;
	max-height: 400rpx;
}

.panel-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx;
	border-bottom: 1rpx solid #f0f0f0;
	
	.panel-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}
	
	.total-count {
		font-size: 28rpx;
		color: #666;
	}
}

.panel-content {
	height: 300rpx;
}

.region-list {
	height: 100%;
	padding: 0 32rpx;
}

.region-item {
	padding: 24rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
	cursor: pointer;
	transition: background-color 0.2s ease;
	
	&:last-child {
		border-bottom: none;
	}
	
	&:active {
		background-color: #f8f8f8;
	}
}

.region-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16rpx;
	
	.region-name {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
	}
	
	.region-count {
		font-size: 28rpx;
		color: #007AFF;
		font-weight: 600;
	}
}

.region-bar {
	height: 8rpx;
	background-color: #f0f0f0;
	border-radius: 4rpx;
	overflow: hidden;
	
	.region-progress {
		height: 100%;
		background: linear-gradient(90deg, #007AFF 0%, #5AC8FA 100%);
		border-radius: 4rpx;
		transition: width 0.3s ease;
	}
}

// 人物列表弹窗样式
.person-list-content {
	background: #fff;
	border-radius: 24rpx;
	width: 600rpx;
	max-height: 80vh;
	overflow: hidden;
}

.person-list-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx;
	border-bottom: 1rpx solid #f0f0f0;
	
	.person-list-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}
	
	.close-btn {
		padding: 10rpx;
		cursor: pointer;
	}
}

.person-list-body {
	padding: 32rpx;
	max-height: 60vh;
	overflow-y: auto;
}

.person-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24rpx;
}

.person-item {
	background: #f8f8f8;
	border-radius: 16rpx;
	padding: 24rpx;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease;
	border: 2rpx solid transparent;
	
	&:hover {
		background: #f0f0f0;
		border-color: #007AFF;
	}
	
	&:active {
		transform: scale(0.98);
	}
	
	.person-name {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
	}
}

// 人物详情弹窗样式
.person-detail-content {
	background: #fff;
	border-radius: 24rpx;
	width: 600rpx;
	max-height: 80vh;
	overflow: hidden;
}

.person-detail-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx;
	border-bottom: 1rpx solid #f0f0f0;
	
	.person-detail-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}
	
	.close-btn {
		padding: 10rpx;
		cursor: pointer;
	}
}

.person-detail-body {
	padding: 32rpx;
	max-height: 60vh;
	overflow-y: auto;
}

.person-info {
	margin-bottom: 40rpx;
	
	.person-subtitle {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
		font-weight: 500;
	}
	
	.person-content {
		display: block;
		font-size: 30rpx;
		color: #333;
		line-height: 1.6;
		text-align: justify;
	}
}

.person-actions {
	.action-btn {
		
		padding: 24rpx;
		border-radius: 16rpx;
		text-align: center;
		cursor: pointer;
		transition: all 0.2s ease;
		
		text {
			font-size: 30rpx;
			font-weight: 500;
		}
		
		&.primary {
			background: #007AFF;
			color: #fff;
			
			&:active {
				background: #0056CC;
			}
		}
	}
}

// 地点事迹弹窗样式
.location-detail-content {
	background: #fff;
	border-radius: 24rpx;
	width: 600rpx;
	max-height: 60vh;
	overflow: hidden;
}

.location-detail-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx;
	border-bottom: 1rpx solid #f0f0f0;
	
	.location-detail-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}
	
	.close-btn {
		padding: 10rpx;
		cursor: pointer;
	}
}

.location-detail-body {
	padding: 32rpx;
}

.location-info {
	.location-event {
		display: block;
		font-size: 30rpx;
		color: #333;
		line-height: 1.6;
		text-align: justify;
	}
}



.popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  width: 80%;
  max-width: 300px;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.popup-options {
  margin-top: 20px;
}

.popup-options button {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: none;
  background-color: #ff9900;
  color: white;
  font-size: 16px;
  border-radius: 5px;
}
</style> 